<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信企业号-应用消息推送</title>
    <link rel="stylesheet" href="/css/zui.min.css">
</head>
<body>
[#if status??]
<div>
    <h4>${error_message}</h4>
</div>
[#else]
<div class="container-fixed-md">
    <ol class="breadcrumb" style="margin-top: 15px;margin-bottom: 0px;">
        <li><a href="/"><i class="icon icon-home"></i> 首页</a></li>
        <li><a href="/chats?agent_id=${agent.agentId}"> 群聊会话</a></li>
        <li class="active">群聊消息</li>
    </ol>
    <hr style="margin-top: 0px; margin-bottom: 0px;">
</div>
<div class="container-fixed-md">
    <div class="row" style="margin-top: 20px">
        <div class="col-xs-3">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="###" data-target="#tab3Content1" data-toggle="tab"> 文本消息</a></li>
                <li><a href="###" data-target="#tab3Content2" data-toggle="tab"> 图片信息</a></li>
                <li><a href="###" data-target="#tab3Content3" data-toggle="tab"> 语音信息</a></li>
                <li><a href="###" data-target="#tab3Content4" data-toggle="tab"> 视频消息</a></li>
                <li><a href="###" data-target="#tab3Content5" data-toggle="tab"> 文件消息</a></li>
                <li><a href="###" data-target="#tab3Content6" data-toggle="tab"> 文本卡片消息</a></li>
                <li><a href="###" data-target="#tab3Content7" data-toggle="tab"> 图文消息</a></li>
                <li><a href="###" data-target="#tab3Content8" data-toggle="tab"> 图文消息（mpnews）</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <div class="tab-content col-xs-9">
                <div class="tab-pane fade active in" id="tab3Content1">
                    <!-- 文本消息 -->
                    <form class="form-horizontal" style="margin-top: 20px;" id="text-message-form">
                        <input type="hidden" name="msgtype" value="text">
                        <input type="hidden" name="chatid" value="${chat.chatid}">
                        <div class="form-group">
                            <label for="text-text.content" class="col-sm-2">消息内容</label>
                            <div class="col-md-10 col-sm-10">
                                <textarea class="form-control" id="text-text.content" rows="3" name="text.content"
                                          placeholder="换行符请用转义过的’\n’，最长不超过2048个字节"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="text-safe" class="col-sm-2">保密消息</label>
                            <div class="col-md-6 col-sm-10">
                                <div class="switch">
                                    <input type="checkbox" class="form-control" id="text-safe" name="safe">
                                    <label>否是保密</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="text-message-btn" type="button" class="btn btn-primary">发送</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="tab3Content2">
                    <!-- 图片信息 -->
                    <form class="form-horizontal" style="margin-top: 20px;" id="image-message-form">
                        <input type="hidden" name="msgtype" value="image">
                        <input type="hidden" name="chatid" value="${chat.chatid}">
                        <div class="form-group">
                            <label for="image-media_id" class="col-sm-2">消息内容</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="image-media_id" name="media_id"
                                       placeholder="图片媒体文件，填写素材ID">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="image-safe" class="col-sm-2">保密消息</label>
                            <div class="col-md-6 col-sm-10">
                                <div class="switch">
                                    <input type="checkbox" class="form-control" id="image-safe" name="safe">
                                    <label>否是保密</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="image-text-message-btn" type="button" class="btn btn-primary">发送</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="tab3Content3">
                    <p> 语音信息 </p>
                </div>
                <div class="tab-pane fade" id="tab3Content4">
                    <p> 视频消息 </p>
                </div>
                <div class="tab-pane fade" id="tab3Content5">
                    <p> 文件消息 </p>
                </div>
                <div class="tab-pane fade" id="tab3Content6">
                    <!-- 文本卡片信息 -->
                    <form class="form-horizontal" style="margin-top: 20px;" id="textcard-message-form">
                        <input type="hidden" name="msgtype" value="textcard">
                        <input type="hidden" name="chatid" value="${chat.chatid}">
                        <div class="form-group">
                            <label for="textcard.title-1" class="col-sm-2">标题</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard.title-1" name="textcard.title"
                                       placeholder="不超过128个字节，超过会自动截断">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard.description-1" class="col-sm-2">描述</label>
                            <div class="col-md-10 col-sm-10">
                                <textarea class="form-control" id="textcard.description-1" name="textcard.description"
                                          placeholder="不超过512个字节，超过会自动截断"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard.url-1" class="col-sm-2">跳转连接</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard.url-1" name="textcard.url"
                                       placeholder="点击后跳转的链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard.btntxt-1" class="col-sm-2">按钮文字</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard.btntxt-1" name="textcard.btntxt"
                                       placeholder="仅在图文数为1条时才生效。 默认为“阅读全文”， 不超过4个文字">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard-safe" class="col-sm-2">保密消息</label>
                            <div class="col-md-6 col-sm-10">
                                <div class="switch">
                                    <input type="checkbox" class="form-control" id="textcard-safe" name="safe">
                                    <label>否是保密</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="textcard-message-btn" type="button" class="btn btn-primary">发送</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="tab3Content7">
                    <!-- 图文消息 -->
                    <form class="form-horizontal" style="margin-top: 20px;" id="news-message-form">
                        <input type="hidden" name="msgtype" value="news">
                        <input type="hidden" name="chatid" value="${chat.chatid}">
                        <div class="form-group">
                            <label for="news.articles.title-1" class="col-sm-2">标题</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.title-1" name="atc.title"
                                       placeholder="不超过128个字节，超过会自动截断">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.description-1" class="col-sm-2">描述</label>
                            <div class="col-md-10 col-sm-10">
                                <textarea class="form-control" id="news.articles.description-1" name="atc.description"
                                          placeholder="不超过512个字节，超过会自动截断"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.url-1" class="col-sm-2">跳转连接</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.url-1" name="atc.url"
                                       placeholder="点击后跳转的链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.picurl-1" class="col-sm-2">消息图片</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.picurl-1" name="atc.picurl"
                                       placeholder="图文消息的图片链接，支持JPG、PNG格式，较好的效果为大图640*320，小图80*80">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.btntxt-1" class="col-sm-2">按钮文字</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.btntxt-1" name="atc.btntxt"
                                       placeholder="仅在图文数为1条时才生效。 默认为“阅读全文”， 不超过4个文字">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news-safe" class="col-sm-2">保密消息</label>
                            <div class="col-md-6 col-sm-10">
                                <div class="switch">
                                    <input type="checkbox" class="form-control" id="news-safe" name="safe">
                                    <label>否是保密</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="news-message-btn" type="button" class="btn btn-primary">发送</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="tab3Content8">
                    <p> 图文消息（mpnews） </p>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/js/jquery1.8.1.js"></script>
<script src="/js/zui.min.js"></script>
<script type="text/javascript">
    // 序列化JSON字符串
    $.fn.serializeObject = function () {
        let o = {};
        let a = this.serializeArray();
        $.each(a, function () {
            let value = this.value;
            let chain = this.name.split(".");
            let c = o;
            $.each(chain, function (i, e) {
                if (i === (chain.length - 1)) {
                    if (c[e]) {
                        if (!c[e].push) {
                            c[e] = [c[e]];
                        }
                        c[e].push(value || '');
                    } else {
                        c[e] = value || '';
                    }
                } else {
                    if (!c[e]) {
                        c[e] = {};
                    }
                }
                c = o[e];
            });
        });
        return o;
    };

    var agent_id = '${agent.agentId}';
    var sendMessage = function (msg) {
        if (agent_id == null || agent_id == '' || agent_id == undefined) {
            alert("应用ID不能为空");
            return false;
        }
        $.ajax({
            url: '/appchat/message?agent_id=' + agent_id,
            type: 'POST',
            dataType: 'json',
            contentType:"application/json",
            data: msg,
            beforeSend: function () {
                console.log(agent_id + ' start send message');
            },
            success: function (result) {
                console.log(result);
                if (result.status == 'ok') {
                    new $.zui.Messager('  提示消息：成功!', {
                        type: 'success',
                        time: 3000
                    }).show();
                } else {
                    new $.zui.Messager('  提示消息：' + result.status + '!', {
                        type: 'danger',
                        time: 3000
                    }).show();
                }
            },
            error: function () {
                new $.zui.Messager('  提示消息：请求失败!', {
                    type: 'danger',
                    time: 5000
                }).show();
            },
            complete: function () {

            }
        });
    }

    $('#text-message-btn').on('click', function () {
        var form = $('#text-message-form').serializeObject();
        if($('#text-safe').is(':checked')){
            form.safe = 1;
        } else {
            form.safe = 0;
        }
        console.log(JSON.stringify(form));
        sendMessage(JSON.stringify(form));
    });
    $('#image-message-btn').on('click', function () {
        var form = $('#image-message-form').serializeObject();
        if($('#image-safe').is(':checked')){
            form.safe = 1;
        } else {
            form.safe = 0;
        }
        console.log(JSON.stringify(form));
        sendMessage(JSON.stringify(form));
    });
    $('#textcard-message-btn').on('click', function () {
        var form = $('#textcard-message-form').serializeObject();
        if($('#textcard-safe').is(':checked')){
            form.safe = 1;
        } else {
            form.safe = 0;
        }
        console.log(form);
        sendMessage(JSON.stringify(form));
    });
    $('#news-message-btn').on('click', function () {
        var form = $('#news-message-form').serializeObject();
        if($('#news-safe').is(':checked')){
            form.safe = 1;
        } else {
            form.safe = 0;
        }
        var articles = [];
        var news = {};
        articles.push(form.atc);
        news.articles = articles;
        form.news = news;
        delete form.atc;
        console.log(form);
        sendMessage(JSON.stringify(form));
    });
</script>
[/#if]
</body>
</html>